<!DOCTYPE html>
<html>
<head>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
</head>
<body>
    <div id="app">
        <h1>axios讲解</h1>
        <a href="javascript:;" @click="get">Get请求</a>
        <a href="javascript:;" @click="post">Post请求</a>
        <a href="javascript:;" @click="http">JSONP请求</a>
        <!-- <a href="">Get请求</a>
        <a href="">Get请求</a> -->
         {{msg}}
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        },
        mounted() {
            axios.interceptors.request.use(function (config) {
                return config
            })
            axios.interceptors.response.use(function (response) {
                return response
            })
        },
        methods:{
            get:function(){
                axios.get("../package.json", {
                    params: {
                        userId: "101"
                    },
                    headers: {
                        token: "abcd"
                    }
                }).then(res =>{
                    this.msg = res;
                },error =>{
                    this.msg = error;                    
                })
            },
            
            http:function(){
                axios({
                    url:"../package.json",
                    method:"get",
                    params:{
                        userId:"101"
                    },
                    headers:{
                        token:"http-test"
                    }
                }).then(res => {
                    console.log("res  ", res);
                    
                })
            }

        }
    })
</script>
</html>